<template>
  <div class="content-shape-blocks">
    <div class="block">
      <div class="place-holder"></div>
      <div class="front">
        <span>{{ "汇聚数据总量" }}</span>
        <span>{{ total.value }}</span>
      </div>

    </div>
    <div class="block">
      <div class="front">
        <span>{{ "月汇聚量" }}</span>
        <span>{{ month }}</span>
      </div>

    </div>
    <div class="block">
      <div class="front">
        <span>{{ "日汇聚量" }}</span>
        <span>{{ day }}</span>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "a1-box",
  props: {
    total: {
      type: Object,
      default: () => ({ value: 0, rate: 0 }),
    },
    month: {
      type: Number,
      default: 0,
    },
    day: {
      type: Number,
      default: 0,
    },
  },
    watch: {

        month(newvalue,oldvalue) {
          if(newvalue < 0){
              this.month = 0;
          }
        },
        day(newvalue,oldvalue) {
            if(newvalue < 0){
                this.day = 0;
            }
        },
    },
    mounted() {
        console.log()
    }
};
</script>

<style lang="less" scoped>
.content-shape-blocks {
  height: 250px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  .block {
    &:nth-child(1) {
      grid-column: span 2;
      background: url(../../../assets/img/assemble/bg1-1.jpg) no-repeat;
      background-size: 100% 100%;
      display: flex;
      font-size: 16px;
      justify-content: space-around;
      align-items: center;
      .front {
        display: flex;
        flex-direction: column;
        padding: 44px;
      }
      .back {
        display: flex;
        flex-direction: column;
        span {
          font-size: 12px;
        }
        .total-rate {
          background: url(../../../assets/img/assemble/1-1.png) no-repeat;
          background-size: 100% 100%;
          width: 60px;
          height: 40px;
          display: flex;
          padding-top: 14px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    &:nth-child(2) {
      background: url(../../../assets/img/assemble/bg1-2.jpg);
      background-size: 100% 100%;
      display: flex;
      font-size: 16px;
      justify-content: space-around;
      align-items: center;
      .front {
        display: flex;
        flex-direction: column;
      }
      .back {
        display: flex;
        flex-direction: column;
        .month-rate {
          background: url(../../../assets/img/assemble/1-2.png);
          background-size: 100% 100%;
          width: 60px;
          height: 40px;
          display: flex;
          padding-top: 14px;
          justify-content: center;
          align-items: center;
        }
      }
    }
    &:nth-child(3) {
      background: url(../../../assets/img/assemble/bg1-3.jpg);
      background-size: 100% 100%;
      display: flex;
      font-size: 16px;
      justify-content: space-around;
      align-items: center;
      .front {
        display: flex;
        flex-direction: column;
      }
      .back {
        display: flex;
        flex-direction: column;
        .day-rate {
          background: url(../../../assets/img/assemble/1-3.png);
          background-size: 100% 100%;
          width: 60px;
          height: 40px;
          display: flex;
          padding-top: 14px;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
